<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="45%"
      v-dialogDrag
      append-to-body
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        v-loading="formLoading"
        label-width="100px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="帖子发布者的关注者数量" prop="followerNum">
          <el-input
            v-model="formData.followerNum"
            placeholder="请输入帖子发布者的关注者数量"
          />
        </el-form-item>
        <el-form-item label="帖子发布者头像URL" prop="userAvatar">
          <el-input
            v-model="formData.userAvatar"
            placeholder="请输入帖子发布者头像URL"
          />
          <img v-if="formData.userAvatar" :src="formData.userAvatar" alt="预览" class="preview-image" />
        </el-form-item>
        <el-form-item label="帖子发布者用户名" prop="userName">
          <el-input
            v-model="formData.userName"
            placeholder="请输入帖子发布者用户名"
          />
        </el-form-item>
        <el-form-item label="帖子内容" prop="postContent">
          <Editor v-model="formData.postContent" :min-height="192" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">
          确 定
        </el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as DataInfotwoApi from "@/api/system/datainfotwo";
import Editor from "@/components/Editor";

export default {
  name: "DataInfotwoForm",
  components: {
    Editor,
  },
  data() {
    return {
      dialogTitle: "",
      dialogVisible: false,
      formLoading: false,
      formData: {
        id: undefined,
        title: undefined,
        followerNum: undefined,
        userAvatar: undefined,
        userName: undefined,
        postContent: undefined,
      },
      formRules: {
        title: [
          {
            required: true,
            message: "标题不能为空",
            trigger: "blur",
          },
        ],
        followerNum: [
          {
            required: true,
            message: "帖子发布者的关注者数量必须为数字",
            trigger: "blur",
          },
        ],
        userAvatar: [
          {
            message: "帖子发布者头像URL不能为空",
            trigger: "blur",
          },
          {
            type: "url",
            message: "请输入有效的URL地址",
            trigger: "blur",
          },
        ],
        userName: [
          {
            message: "帖子发布者用户名不能为空",
            trigger: "blur",
          },
        ],
        postContent: [
          {
            required: true,
            message: "帖子内容不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async open(id) {
      this.dialogVisible = true;
      this.reset();
      if (id) {
        this.formLoading = true;
        try {
          const res = await DataInfotwoApi.getDataInfotwo(id);
          this.formData = res.data;
          this.dialogTitle = "修改帖子区域";
        } finally {
          this.formLoading = false;
        }
      } else {
        this.dialogTitle = "新增帖子区域";
      }
    },
    async submitForm() {
      try {
        await this.$refs["formRef"].validate();
        this.formLoading = true;
        const data = this.formData;
        if (data.id) {
          await DataInfotwoApi.updateDataInfotwo(data);
          this.$modal.msgSuccess("修改成功");
          this.dialogVisible = false;
          this.$emit("success");
          return;
        }
        await DataInfotwoApi.createDataInfotwo(data);
        this.$modal.msgSuccess("新增成功");
        this.dialogVisible = false;
        this.$emit("success");
      } catch (error) {
        console.error("提交失败", error);
        this.$modal.msgError(
          error.message || "提交失败，请检查网络或联系管理员"
        );
      } finally {
        this.formLoading = false;
      }
    },
    reset() {
      this.formData = {
        id: undefined,
        title: undefined,
        followerNum: undefined,
        userAvatar: undefined,
        userName: undefined,
        postContent: undefined,
      };
      this.$nextTick(() => {
        this.$refs.formRef?.resetFields();
      });
    },
  },
};
</script>

<style scoped>
.preview-image {
  max-width: 100%;
  max-height: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
}
</style>